<template>
  <view class="step">
    <view class="area" v-for="(item, i) in stepArr" :key="i">
      <view class="title">{{ item.title }}</view>
      <view class="text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "step",
  props: {
    stepArr: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.step {
  .area {
    border-bottom: 3rpx dashed #e5e5e5;
    padding-bottom: 30rpx;
    margin-bottom: 20rpx;
    .title {
      color: #8890a5;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }
    .text {
      font-size: 30rpx;
    }
  }
  & .area:last-child {
    margin: 0;
    border: none;
  }
}
</style>